<template>
  <div>
    <div class="news-second">
      <timeline :reverse="reverse">
        <timeline-item v-for="(activity, index) in jingcaishike" :key="index">
          <div class="time-info">
            <span>{{ activity.publishtime }}</span>
            <!--<span class="time-origin">新京報</span>-->
          </div>
          <div class="news-second-imgs">
            <elImage :src="img" v-for="(img, index) in activity.logoimages.split(',')" :key="index" fit="cover"
                     class="news-second-img"></elImage>
          </div>
          <div class="news-second-title">{{ activity.title }}</div>
          <div class="news-second-content">{{ activity.description }}</div>
          <div class="news-second-more">查看详情>></div>
        </timeline-item>
      </timeline>
    </div>
    <div style="text-align: center;">
      <Pagination background layout="prev, pager, next" :page-size='6' :total="total" @current-change="currentChange">
      </Pagination>
    </div>
  </div>
</template>

<script>
import {Timeline, TimelineItem, Image, Pagination} from 'element-ui';
import {jingcaishike} from '../../api/cms.js';

export default {
  components: {
    Timeline,
    TimelineItem,
    elImage: Image,
    Pagination
  },
  data() {
    return {
      jingcaishike: {},
      reverse: true,
      total: 0
    };
  },
  created() {
    //请求信息
    this.getList(1)
  },
  currentChange(index) {
    this.getList(index)
  },
  methods:{
    getList(page) {
      jingcaishike({
        page,
        limit: 6
      })
          .then(res => {
            this.jingcaishike = res.data.data.rows;
            this.total = res.data.data.total
          })
          .catch(res => {
            console.log(res);
          });
    }
  }
};
</script>

<style>
.news-second {
  width: 1240px;
  margin: 36px auto;
}

.news-second .el-timeline-item__node {
  background-color: #0143a0;
}

.time-info {
  color: #828282;
  font-size: 13px;
}

.time-info .time-origin {
  display: inline-block;
  margin-left: 220px;
}

.news-second-imgs {
  width: 1110px;
  padding: 15px 0;
}

.news-second-img {
  width: 345px;
  height: 200px;
}

.news-second-img:nth-child(2) {
  margin: 0 36px;
}

.news-second-title {
  width: 1110px;
  color: #2b2e2e;
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.news-second-content {
  width: 1110px;
  color: #000000;
  line-height: 30px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.news-second-more {
  width: 1110px;
  text-align: right;
  color: #3f87f5;
  font-size: 18px;
}
</style>
